<template>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <h1>WMS 仓库管理系统 - 实时大屏</h1>
      <div class="header-actions">
        <el-button 
          :icon="Refresh" 
          :loading="isRefreshing"
          type="primary" 
          @click="handleManualRefresh"
        >
          刷新数据
        </el-button>
        <div class="current-time">{{ currentTime }}</div>
      </div>
    </div>

    <!-- 顶部数据卡片 -->
    <div class="dashboard-cards">
      <!-- 库存数量占比 -->
      <div class="dashboard-card inventory-card">
        <div class="card-title">
          <el-icon><Box /></el-icon>
          <span>库存数量占比</span>
        </div>
        <div class="card-content">
          <div ref="inventoryQuantityChart" style="width: 100%; height: 300px;"></div>
        </div>
      </div>

      <!-- 库存金额占比 -->
      <div class="dashboard-card inventory-card">
        <div class="card-title">
          <el-icon><Money /></el-icon>
          <span>库存金额占比</span>
        </div>
        <div class="card-content">
          <div ref="inventoryAmountChart" style="width: 100%; height: 300px;"></div>
        </div>
      </div>
    </div>

    <!-- 中部统计数据 -->
    <div class="dashboard-cards">
      <!-- 入库统计 -->
      <div class="dashboard-card">
        <div class="card-title">
          <el-icon><Upload /></el-icon>
          <span>入库统计</span>
        </div>
        <div class="stats-content">
          <div class="stat-item">
            <div class="stat-label">今日入库</div>
            <div class="stat-value">
              <div class="stat-number">{{ inboundStats.todayInboundQuantity }}</div>
              <div class="stat-amount">金额: ¥{{ inboundStats.todayInboundAmount.toFixed(2) }}</div>
            </div>
          </div>
          <div class="stat-item">
            <div class="stat-label">本月入库</div>
            <div class="stat-value">
              <div class="stat-number">{{ inboundStats.monthInboundQuantity }}</div>
              <div class="stat-amount">金额: ¥{{ inboundStats.monthInboundAmount.toFixed(2) }}</div>
            </div>
          </div>
        </div>
        <div ref="inboundTrendChart" style="width: 100%; height: 200px; margin-top: 20px;"></div>
      </div>

      <!-- 出库统计 -->
      <div class="dashboard-card">
        <div class="card-title">
          <el-icon><Download /></el-icon>
          <span>出库统计</span>
        </div>
        <div class="stats-content">
          <div class="stat-item">
            <div class="stat-label">今日出库</div>
            <div class="stat-value">
              <div class="stat-number">{{ outboundStats.todayOutboundQuantity }}</div>
              <div class="stat-amount">金额: ¥{{ outboundStats.todayOutboundAmount.toFixed(2) }}</div>
            </div>
          </div>
          <div class="stat-item">
            <div class="stat-label">本月出库</div>
            <div class="stat-value">
              <div class="stat-number">{{ outboundStats.monthOutboundQuantity }}</div>
              <div class="stat-amount">金额: ¥{{ outboundStats.monthOutboundAmount.toFixed(2) }}</div>
            </div>
          </div>
        </div>
        <div ref="outboundTrendChart" style="width: 100%; height: 200px; margin-top: 20px;"></div>
      </div>
    </div>

    <!-- 底部信息区 -->
    <div class="dashboard-cards">
      <!-- 代办事项 -->
      <div class="dashboard-card todo-card">
        <div class="card-title">
          <el-icon><List /></el-icon>
          <span>代办事项 ({{ todoTasks.length }})</span>
        </div>
        <el-scrollbar class="todo-list">
          <div class="todo-item" v-for="task in todoTasks" :key="task.id">
            <div class="todo-priority" :class="'priority-' + task.priority"></div>
            <div class="todo-content">
              <div class="todo-title">{{ task.title }}</div>
              <div class="todo-desc">{{ task.description }}</div>
              <div class="todo-time">{{ formatTime(task.createTime) }}</div>
            </div>
          </div>
          <div v-if="todoTasks.length === 0" class="empty-state">暂无代办事项</div>
        </el-scrollbar>
      </div>

      <!-- 预警信息 -->
      <div class="dashboard-card alert-card">
        <div class="card-title">
          <el-icon><Warning /></el-icon>
          <span>预警信息 ({{ alerts.length }})</span>
        </div>
        <el-scrollbar class="alert-list">
          <div class="alert-item" v-for="alert in alerts" :key="alert.id" :class="'urgency-' + alert.urgencyLevel">
            <div class="alert-title">{{ alert.title }}</div>
            <div class="alert-content">{{ alert.content }}</div>
            <div class="alert-time">{{ formatTime(alert.createTime) }}</div>
          </div>
          <div v-if="alerts.length === 0" class="empty-state">暂无预警信息</div>
        </el-scrollbar>
      </div>

      <!-- 入库排名 -->
      <div class="dashboard-card ranking-card">
        <div class="card-title">
          <el-icon><Trophy /></el-icon>
          <span>入库排名</span>
        </div>
        <div class="ranking-list">
          <div class="ranking-item" v-for="item in inboundRanking" :key="item.rank">
            <div class="ranking-number" :class="getRankingClass(item.rank)">{{ item.rank }}</div>
            <div class="ranking-name">{{ item.name }}</div>
            <div class="ranking-value">¥{{ item.amount.toFixed(2) }}</div>
          </div>
        </div>
      </div>

      <!-- 出库排名 -->
      <div class="dashboard-card ranking-card">
        <div class="card-title">
          <el-icon><DataLine /></el-icon>
          <span>出库排名</span>
        </div>
        <div class="ranking-list">
          <div class="ranking-item" v-for="item in outboundRanking" :key="item.rank">
            <div class="ranking-number" :class="getRankingClass(item.rank)">{{ item.rank }}</div>
            <div class="ranking-name">{{ item.name }}</div>
            <div class="ranking-value">¥{{ item.amount.toFixed(2) }}</div>
          </div>
        </div>
      </div>

      <!-- 系统消息 -->
      <div class="dashboard-card message-card">
        <div class="card-title">
          <el-icon><Bell /></el-icon>
          <span>系统消息</span>
        </div>
        <el-scrollbar class="message-list">
          <div class="message-item" v-for="(msg, index) in systemMessages" :key="index">
            <div class="message-icon" :class="'type-' + msg.type"></div>
            <div class="message-content">{{ msg.content }}</div>
            <div class="message-time">{{ formatTime(msg.time) }}</div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="wmsDashboard">
import { ref, onMounted, onUnmounted } from 'vue';
import { Box, Money, Upload, Download, List, Warning, Trophy, DataLine, Bell, Refresh } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';
import { getToken } from '/@/utils/axios-utils';
import * as SignalR from '@microsoft/signalr';

// 图表引用
const inventoryQuantityChart = ref();
const inventoryAmountChart = ref();
const inboundTrendChart = ref();
const outboundTrendChart = ref();

// 连接实例
let connection: SignalR.HubConnection | null = null;

// 数据状态
const currentTime = ref(new Date().toLocaleString());

// 定义接口类型
interface InventoryRatioData {
  name: string;
  value: number;
  percentage: number;
}

interface TodoTaskData {
  id: number;
  taskType: string;
  title: string;
  description: string;
  priority: number;
  createTime: string | Date;
}

interface AlertData {
  id: number;
  alertType: string;
  title: string;
  content: string;
  urgencyLevel: number;
  createTime: string | Date;
}

interface RankingData {
  rank: number;
  name: string;
  quantity: number;
  amount: number;
}

interface MessageItem {
  content: string;
  time: string | Date;
  type: string;
}

interface StatisticalTrend {
  date: string;
  quantity: number;
  amount: number;
}

const inventoryQuantityRatio = ref<InventoryRatioData[]>([]);
const inventoryAmountRatio = ref<InventoryRatioData[]>([]);
const inboundStats = ref({
  todayInboundQuantity: 0,
  todayInboundAmount: 0,
  monthInboundQuantity: 0,
  monthInboundAmount: 0,
  trends: [] as StatisticalTrend[]
});
const outboundStats = ref({
  todayOutboundQuantity: 0,
  todayOutboundAmount: 0,
  monthOutboundQuantity: 0,
  monthOutboundAmount: 0,
  trends: [] as StatisticalTrend[]
});
const todoTasks = ref<TodoTaskData[]>([]);
const alerts = ref<AlertData[]>([]);
const inboundRanking = ref<RankingData[]>([]);
const outboundRanking = ref<RankingData[]>([]);
const systemMessages = ref<MessageItem[]>([]);

// 刷新状态
const isRefreshing = ref(false);

// 请求大屏数据
const requestDashboardData = async () => {
  try {
    const response = await fetch(`${window.__env__.VITE_API_URL}/api/wmsDashboard/manualRefresh`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${getToken()}`
      }
    });
    
    if (response.ok) {
      console.log('大屏数据请求成功，等待 SignalR 推送...');
    } else {
      console.error('大屏数据请求失败:', await response.text());
    }
  } catch (error) {
    console.error('请求大屏数据失败:', error);
  }
};

// 手动刷新
const handleManualRefresh = async () => {
  if (isRefreshing.value) return;
  
  try {
    isRefreshing.value = true;
    await requestDashboardData();
    ElMessage.success('数据刷新成功');
  } catch (error) {
    console.error('刷新失败:', error);
    ElMessage.error('数据刷新失败');
  } finally {
    isRefreshing.value = false;
  }
};

// 初始化 SignalR 连接
const initSignalR = () => {
  connection = new SignalR.HubConnectionBuilder()
    .configureLogging(SignalR.LogLevel.Information)
    .withUrl(`${window.__env__.VITE_API_URL}/hubs/wmsDashboard?token=${getToken()}`, {
      transport: SignalR.HttpTransportType.WebSockets,
      skipNegotiation: true
    })
    .withAutomaticReconnect({
      nextRetryDelayInMilliseconds: () => 5000
    })
    .build();

  // 接收库存数量占比
  connection.on('ReceiveInventoryQuantityRatio', (data: any) => {
    console.log('收到库存数量占比数据:', data);
    inventoryQuantityRatio.value = data;
    updateInventoryQuantityChart();
  });

  // 接收库存金额占比
  connection.on('ReceiveInventoryAmountRatio', (data: any) => {
    console.log('收到库存金额占比数据:', data);
    inventoryAmountRatio.value = data;
    updateInventoryAmountChart();
  });

  // 接收入库统计
  connection.on('ReceiveInboundStatistics', (data: any) => {
    console.log('收到入库统计数据:', data);
    inboundStats.value = data;
    updateInboundTrendChart();
  });

  // 接收出库统计
  connection.on('ReceiveOutboundStatistics', (data: any) => {
    console.log('收到出库统计数据:', data);
    outboundStats.value = data;
    updateOutboundTrendChart();
  });

  // 接收代办事项
  connection.on('ReceiveTodoTasks', (data: any) => {
    console.log('收到代办事项数据:', data);
    todoTasks.value = data;
  });

  // 接收预警信息
  connection.on('ReceiveAlerts', (data: any) => {
    console.log('收到预警信息数据:', data);
    alerts.value = data;
  });

  // 接收入库排名
  connection.on('ReceiveInboundRanking', (data: any) => {
    console.log('收到入库排名数据:', data);
    inboundRanking.value = data;
  });

  // 接收出库排名
  connection.on('ReceiveOutboundRanking', (data: any) => {
    console.log('收到出库排名数据:', data);
    outboundRanking.value = data;
  });

  // 接收系统消息
  connection.on('ReceiveSystemMessages', (data: any) => {
    console.log('收到系统消息数据:', data);
    systemMessages.value = data.messages || [];
  });

  // 启动连接
  connection.start().then(() => {
    console.log('WMS Dashboard SignalR 连接已启动');
    // 连接成功后，主动触发一次数据请求
    requestDashboardData();
  }).catch(err => {
    console.error('WMS Dashboard SignalR 连接失败:', err);
  });

  // 断开连接
  connection.onclose(async () => {
    console.log('WMS Dashboard SignalR 连接已断开');
  });
};

// 更新库存数量占比图表
const updateInventoryQuantityChart = () => {
  if (!inventoryQuantityChart.value) return;
  
  const chart = echarts.getInstanceByDom(inventoryQuantityChart.value);
  if (!chart) {
    echarts.init(inventoryQuantityChart.value).setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      series: [{
        name: '库存数量',
        type: 'pie',
        radius: '70%',
        data: inventoryQuantityRatio.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    });
  } else {
    chart.setOption({
      series: [{
        data: inventoryQuantityRatio.value.map(item => ({
          value: item.value,
          name: item.name
        }))
      }]
    });
  }
};

// 更新库存金额占比图表
const updateInventoryAmountChart = () => {
  if (!inventoryAmountChart.value) return;
  
  const chart = echarts.getInstanceByDom(inventoryAmountChart.value);
  if (!chart) {
    echarts.init(inventoryAmountChart.value).setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: ¥{c} ({d}%)'
      },
      series: [{
        name: '库存金额',
        type: 'pie',
        radius: '70%',
        data: inventoryAmountRatio.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    });
  } else {
    chart.setOption({
      series: [{
        data: inventoryAmountRatio.value.map(item => ({
          value: item.value,
          name: item.name
        }))
      }]
    });
  }
};

// 更新入库趋势图表
const updateInboundTrendChart = () => {
  if (!inboundTrendChart.value) return;
  
  const chart = echarts.getInstanceByDom(inboundTrendChart.value);
  const dates = inboundStats.value.trends.map(t => t.date);
  const quantities = inboundStats.value.trends.map(t => t.quantity);
  const amounts = inboundStats.value.trends.map(t => t.amount);
  
  if (!chart) {
    echarts.init(inboundTrendChart.value).setOption({
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: dates },
      yAxis: [
        { type: 'value', name: '数量', position: 'left' },
        { type: 'value', name: '金额', position: 'right' }
      ],
      series: [
        { name: '入库数量', type: 'line', data: quantities },
        { name: '入库金额', type: 'bar', yAxisIndex: 1, data: amounts }
      ]
    });
  } else {
    chart.setOption({
      xAxis: { data: dates },
      series: [
        { data: quantities },
        { data: amounts }
      ]
    });
  }
};

// 更新出库趋势图表
const updateOutboundTrendChart = () => {
  if (!outboundTrendChart.value) return;
  
  const chart = echarts.getInstanceByDom(outboundTrendChart.value);
  const dates = outboundStats.value.trends.map(t => t.date);
  const quantities = outboundStats.value.trends.map(t => t.quantity);
  const amounts = outboundStats.value.trends.map(t => t.amount);
  
  if (!chart) {
    echarts.init(outboundTrendChart.value).setOption({
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: dates },
      yAxis: [
        { type: 'value', name: '数量', position: 'left' },
        { type: 'value', name: '金额', position: 'right' }
      ],
      series: [
        { name: '出库数量', type: 'line', data: quantities },
        { name: '出库金额', type: 'bar', yAxisIndex: 1, data: amounts }
      ]
    });
  } else {
    chart.setOption({
      xAxis: { data: dates },
      series: [
        { data: quantities },
        { data: amounts }
      ]
    });
  }
};

// 格式化时间
const formatTime = (time: string | Date) => {
  const date = typeof time === 'string' ? new Date(time) : time;
  return date.toLocaleString('zh-CN');
};

// 获取排名样式
const getRankingClass = (rank: number) => {
  if (rank === 1) return 'rank-gold';
  if (rank === 2) return 'rank-silver';
  if (rank === 3) return 'rank-bronze';
  return '';
};

// 更新时间
const updateTime = () => {
  currentTime.value = new Date().toLocaleString();
};

let timeInterval: NodeJS.Timeout;
let chartResizeTimer: NodeJS.Timeout;

onMounted(() => {
  initSignalR();
  timeInterval = setInterval(updateTime, 1000);
  chartResizeTimer = setInterval(() => {
    [inventoryQuantityChart, inventoryAmountChart, inboundTrendChart, outboundTrendChart].forEach(ref => {
      if (ref.value) {
        const chart = echarts.getInstanceByDom(ref.value);
        chart?.resize();
      }
    });
  }, 30000);
});

onUnmounted(() => {
  if (timeInterval) clearInterval(timeInterval);
  if (chartResizeTimer) clearInterval(chartResizeTimer);
  if (connection) {
    connection.stop();
  }
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  
  // 添加动态背景效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.3) 0%, transparent 50%);
    animation: backgroundShift 20s ease infinite;
    z-index: 0;
  }
  
  @keyframes backgroundShift {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
  }
  
  // 让内容显示在背景之上
  > * {
    position: relative;
    z-index: 1;
  }
  
  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    h1 {
      margin: 0;
      font-size: 32px;
      font-weight: bold;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      background: linear-gradient(90deg, #fff 0%, #f0f0f0 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .header-actions {
      display: flex;
      align-items: center;
      gap: 20px;
      
      .current-time {
        font-size: 18px;
        font-weight: 500;
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
      }
    }
  }
  
  .dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
    
    .dashboard-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      padding: 24px;
      box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.5);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      
      // 添加悬浮效果
      &:hover {
        transform: translateY(-4px);
        box-shadow: 
          0 12px 40px rgba(0, 0, 0, 0.15),
          0 0 0 1px rgba(102, 126, 234, 0.3);
      }
      
      // 添加顶部渐变条
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
      }
      
      .card-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #333;
        padding-bottom: 15px;
        border-bottom: 2px solid #f0f0f0;
        
        .el-icon {
          font-size: 24px;
          color: #667eea;
        }
      }
      
      .card-content {
        height: 100%;
      }
    }
  }
  
  .stats-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    
    .stat-item {
      padding: 16px;
      background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
      border-radius: 12px;
      border: 1px solid #e6ebff;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
      }
      
      .stat-label {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
        font-weight: 500;
      }
      
      .stat-value {
        .stat-number {
          font-size: 36px;
          font-weight: bold;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          line-height: 1.2;
        }
        
        .stat-amount {
          font-size: 14px;
          color: #999;
          margin-top: 8px;
          font-weight: 500;
        }
      }
    }
  }
  
  .todo-list,
  .alert-list,
  .message-list {
    max-height: 400px;
    
    .todo-item,
    .alert-item {
      display: flex;
      padding: 16px;
      margin-bottom: 12px;
      border-radius: 12px;
      background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
      border: 1px solid #e8e8e8;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateX(4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
      }
      
      .todo-priority {
        width: 5px;
        border-radius: 3px;
        margin-right: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        
        &.priority-1 { background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%); }
        &.priority-2 { background: linear-gradient(135deg, #e6a23c 0%, #ebb563 100%); }
        &.priority-3 { background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%); }
      }
      
      .todo-content,
      .alert-content {
        flex: 1;
        
        .todo-title,
        .alert-title {
          font-weight: bold;
          margin-bottom: 6px;
          color: #333;
          font-size: 15px;
        }
        
        .todo-desc,
        .alert-content {
          font-size: 14px;
          color: #666;
          line-height: 1.5;
        }
        
        .todo-time,
        .alert-time {
          font-size: 12px;
          color: #999;
          margin-top: 6px;
          font-weight: 500;
        }
      }
    }
    
    .alert-item.urgency-3 {
      background: linear-gradient(135deg, #fff0f0 0%, #ffe8e8 100%);
      border-color: #ffb3b3;
    }
    
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: #999;
      font-size: 14px;
      background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
      border-radius: 12px;
      border: 2px dashed #e0e0e0;
    }
  }
  
  .ranking-list {
    max-height: 400px;
    overflow-y: auto;
    
    .ranking-item {
      display: flex;
      align-items: center;
      padding: 14px 16px;
      margin-bottom: 10px;
      background: linear-gradient(135deg, #f8f9ff 0%, #fafafb 100%);
      border-radius: 10px;
      border: 1px solid #e6ebff;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateX(4px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.12);
        background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
      }
      
      .ranking-number {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-weight: bold;
        background: #e0e0e0;
        margin-right: 12px;
        
        &.rank-gold { background: #ffd700; color: white; }
        &.rank-silver { background: #c0c0c0; color: white; }
        &.rank-bronze { background: #cd7f32; color: white; }
      }
      
      .ranking-name {
        flex: 1;
        font-weight: 500;
      }
      
      .ranking-value {
        font-weight: bold;
        color: #667eea;
      }
    }
  }
  
  .message-list {
    max-height: 300px;
    
    .message-item {
      display: flex;
      align-items: center;
      padding: 10px;
      margin-bottom: 8px;
      background: #f9f9f9;
      border-radius: 8px;
      
      .message-icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 10px;
        
        &.type-info { background: #909399; }
        &.type-success { background: #67c23a; }
        &.type-warning { background: #e6a23c; }
        &.type-error { background: #f56c6c; }
      }
      
      .message-content {
        flex: 1;
        font-size: 14px;
      }
      
      .message-time {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
